<template>
  <path
    stroke="#000000"
    :style="{
      'stroke-width': 1,
      fill: fill || '#ffffff',
      stroke: fill || '#000000',
    }"
    :d="d"
  />
</template>
<script setup lang="ts">
import { computed } from "vue";
import { Point } from "/@/components/types";

const props = defineProps<{
  points: Point[];
  fill?: string;
}>();

/**

 */
const d = computed(() => {
  const points = props.points;
  const p0 = { x: points[0].x, y: points[0].y };
  const p1 = { x: points[3].x, y: points[3].y };
  const p2 = { x: points[6].x, y: points[6].y };
  const pathPoints: Point[] = [p0, p1, p2];
  const dArr: string[] = [];
  pathPoints.forEach((p) => {
    dArr.push(`${p.x} ${p.y}`);
  });
  const d = "M" + dArr.join("L") + "Z";
  return d;
});
</script>
